<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>商品后台管理系统</title>
    <link rel="stylesheet" href="{% static 'boot/css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'jqgrid/css/trirand/ui.jqgrid-bootstrap.css' %}">
    <script src="{% static 'boot/js/jquery-2.2.1.min.js' %}"></script>
    <script src="{% static 'boot/js/bootstrap.min.js' %}"></script>
    <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
    <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
    <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>

    <!--发送按钮倒计时代码-->
    <script type="text/javascript">

        $.extend($.validator.messages, {
            required: "这是必填字段",
            remote: "请修正此字段",
            email: "请输入有效的电子邮件地址",
            url: "请输入有效的网址",
            date: "请输入有效的日期",
            dateISO: "请输入有效的日期 (YYYY-MM-DD)",
            number: "请输入有效的数字",
            digits: "只能输入数字",
            creditcard: "请输入有效的信用卡号码",
            equalTo: "你的输入不相同",
            extension: "请输入有效的后缀",
            maxlength: $.validator.format("最多可以输入 {0} 个字符"),
            minlength: $.validator.format("最少要输入 {0} 个字符"),
            rangelength: $.validator.format("请输入长度在 {0} 到 {1} 之间的字符串"),
            range: $.validator.format("请输入范围在 {0} 到 {1} 之间的数值"),
            max: $.validator.format("请输入不大于 {0} 的数值"),
            min: $.validator.format("请输入不小于 {0} 的数值")
        });

        var countdown = 60;

        function settime(obj) {
            if (countdown == 0) {
                obj.removeAttribute("disabled");
                obj.value = "免费获取验证码";
                countdown = 60;
                return;
            } else {
                obj.setAttribute("disabled", true);
                obj.value = "重新发送(" + countdown + ")";
                countdown--;
            }
            setTimeout(function () {
                    settime(obj)
                }
                , 1000)
        }

        $(function () {
            // 点击获取验证码， 向后台发送请求验证码
            $('#forcode').click(function () {
                var phone = $("#mobile").val()
                var upat = /^1[3456789]\d{9}$/
                if (phone.length == 0) {
                    alert("手机不能为空")
                } else if (upat.test(phone)) {
                    // 向后台发送ajax请求获取验证码
                    $.ajax({
                        url: "/main/get_code/",
                        type: "POST",
                        data: {mobile: $("#mobile").val()},       // 将手机号参数传至后台
                        success: function (data) {
                            if (data === "请勿在120s内重复发送") {
                                alert('120s内请勿重复发送');
                                console.log(data);
                            } else if (data === "发送成功") {
                                alert('验证码已发送，请在10分钟内验证');
                                console.log(data);
                            }else if (data === "发送成功") {
                                alert('请输入正确的手机号');
                                console.log(data);
                            }
                        }
                    })
                } else {
                    alert("手机格式格式不正确！")
                }
            })


            // 用户发起登录请求
            $("#loginButtonId").click(function () {
                var isOK = $('#loginForm').valid({});
                console.log(isOK);
                if (isOK) {
                    $.ajax({
                        url: "/main/index/",
                        data: "",
                        type: "post",
                        success: function () {

                        }
                    });
                }

            })
        })






</script>

</head>


<body>

<!--手机号码输入框代码-->
<div class="container">
    <div class="form-group">
        <div class="col-lg-10">
            <form id="loginForm" role="form" action="" method="post" class="form-horizontal">

                <label for="mobile" class="">手机号码:</label>
                <div class="input-group m-bot15">
                    <input type="text" class="form-control" required id="mobile" name="mobile" placeholder="手机号码">
                    <span class="input-group-btn">
                         <input type="button" id="forcode" onclick="settime(this)" value="免费获取验证码"
                                class="btn btn-success">
                        </span>
                </div>
                <span id="msgDiv"></span>
                <p class="help-block">请填写绑定手机号</p>
                <label for="basic-url" class="">用户名</label>
                <div class="input-group">
                    <input type="text" class="form-control" id="basic-url" minlength="5" name="name" required>
                    <span class="input-group-addon"></span>
                </div>
                <label for="basic-url" class="">验证码：</label>
                <div class="input-group">
                    <input type="text" class="form-control" id="basic-url" required name="code">
                </div>
                <p class="help-block"></p>
                <div class="input-group">
                    <input class="btn btn-success" type="button" id="loginButtonId" value="登录">
                </div>
            </form>
        </div>
    </div>
</div>

</body>
</html>